<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
           <el-form-item label="日期" prop="graduationDate">
               <el-date-picker
                 v-model="queryParams.timeDate"
                 :picker-options="pickerOptions"
                 value-format="yyyy-MM-dd"
                 type="date"
                 size="small"
                 placeholder="选择日期">
               </el-date-picker>
           </el-form-item>
           <el-form-item label="园所名称：" prop="schoolCode">
            <el-select v-model="queryParams.schoolCode" @change="selectSchool" clearable 
            @clear="getClear"
            filterable placeholder="请选择园所">
                          <el-option
                            v-for="item in schoolList"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                          </el-option>
                        </el-select>
            </el-form-item>
            <el-form-item label="年级：" prop="grade">
              <el-select v-model="queryParams.grade" placeholder="请选择年级" clearable size="small"  @change="getGradechange" :disabled="queryParams.schoolCode==''">
               <el-option v-for="dict in gradeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
           </el-form-item>
            <el-form-item label="班级:" prop="classId">
           <el-select v-model="queryParams.classId" clearable filterable 
              placeholder="请选择班级" :disabled="queryParams.schoolCode==''">
             <el-option
               v-for="item in classOptions"
               :key="item.id"
               :label="item.title"
               :value="item.id"
               size="small">
             </el-option>
           </el-select>
         </el-form-item>
        <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      </el-form>
      <div class="charts"   >
        <div class="chartDom" ref="chartDom"></div>
      </div>
      <el-dialog title="学生停留兴趣区角平均时长统计" :visible.sync="open" width="900px" append-to-body class="elDialg">
        <div class="studentdata">
           <el-form :model="studenParams" ref="studenForm" :inline="true" label-width="85px" >
          <el-form-item label="日期类型：" prop="type">
          <el-radio-group
              v-model="radioTimeChange"
              @change="changeTab"
            >
            <el-radio :label="1">日</el-radio>
            <el-radio :label="2">周</el-radio>
            <el-radio :label="3">月</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="日期：" prop="type" style="z-index: 10000;">
          <el-date-picker
             v-if="radioTimeChange=='1'"
             v-model="dateTime"
             value-format="yyyy-MM-dd"
             :append-to-body="false"
             type="date"
             style="z-index: 10000;width: 300px;"
             placeholder="选择日期">
           </el-date-picker>
           <el-date-picker
             v-if="radioTimeChange=='2'"
             v-model="dateWeek"
             value-format="yyyy-MM-dd"
             :append-to-body="false"
             :format="startDate + ' 至 ' + endDate"
             :picker-options="{'firstDayOfWeek': 1}"
             @change="newDateWeekHandle"
             style="z-index: 10000;width: 300px;"
             type="date"
             placeholder="选择周">
           </el-date-picker>
           <el-date-picker
              v-if="radioTimeChange=='3'"
              v-model="dateYear"
              value-format="yyyy-MM"
              style="z-index: 10000;width: 300px;"
              :append-to-body="false"
              type="month"
              placeholder="选择月">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleStudent">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetStudent">重置</el-button>
      </el-form-item>
           </el-form>
          <div class="studentDom" ref="studentDom"></div>
        </div>
      </el-dialog>
    </div>
</template>
 <script>
 import moment from "moment";
 import { clazzList ,schoolList} from "@/api/qu/qyyerygk";
 export default {
    name: "outdoors",
    data() {
      return {
         pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },  
            },
          queryParams:{
              timeDate:new Date(),
              schoolCode:'',
              grade:'',
              classId:'',
            },
          gradeOptions:[],
          classOptions:[],
          schoolList:[],
          chartDom:null,
          chartList:[
            {name:'区角1',value:'5'},
            {name:'区角2',value:'5'},
            {name:'区角3',value:'4'},
            {name:'区角4',value:'5'},
            {name:'区角5',value:'5'},
            {name:'区角6',value:'6'},
            {name:'区角7',value:'5'},
            {name:'区角8',value:'5'},
            {name:'区角9',value:'2'},
            {name:'区角10',value:'5'},
          ],
          dateTypeOptions:[
            {dictValue:'1',dictLabel:'日'},
            {dictValue:'2',dictLabel:'周'},
            {dictValue:'3',dictLabel:'月'},
          ],
          radioTimeChange:1,
          cornerTypeOptions:[
          ],
          studentDom:null,
          dateTime:'',
          dateWeek:'',
          dateYear:'',
          studenParams:{},
          studentChartList:[
            {name:'学生1',value:'5'},
            {name:'学生2',value:'5'},
            {name:'学生3',value:'4'},
            {name:'学生4',value:'5'},
            {name:'学生5',value:'5'},
            {name:'学生6',value:'6'},
            {name:'学生7',value:'5'},
            {name:'学生8',value:'5'},
            {name:'学生9',value:'2'},
            {name:'学生10',value:'5'},
          ],
          startDate:'',
          endDate:'',
          open:false,

      };
    },
    
    created() {
        this.getDicts("year_type").then(response => {
            this.gradeOptions = response.data;
        });
        this.getDicts("corner_type").then(response => {
          this.cornerTypeOptions = response.data;
        });
        this.getschoolList()
    },
    mounted(){
        this.chartDom = this.$echarts.init(this.$refs.chartDom);
        this.chartDomFn();
      
     
    },
    methods: {
              //获取学校列表
      async getschoolList(){
         const data = await schoolList();
         this.schoolList=data.rows;
         console.log(this.queryParams);
         this.getClazzList();
         
      },
           //clazzList 获取班级列表
      async  getClazzList(){
           console.log(this.queryParams.schoolCode);
           try {
              const obj ={
                schoolCode:this.queryParams.schoolCode,
                year:this.queryParams.grade
              }
             const data=  await  clazzList(obj)
             this.classOptions=data.rows
             console.log(data);
           } catch (error) {
             console.log(error);
           }
       },
       selectSchool(){
          this.getClazzList()
      },
       getGradechange(){
           this.getClazzList()
       },
       onChangeDate(){

       },
       //周日期
       newDateWeekHandle(){
          const now = new Date(this.dateWeek);
          const nowTime = now.getTime();
          const day = now.getDay();
          const oneDayTime = 24*60*60*1000;
          const mondayTime = nowTime - (day-1)*oneDayTime;
          const sundayTime = nowTime + (7-day)*oneDayTime;
          this.startDate = moment(mondayTime).format('YYYY-MM-DD');
          this.endDate = moment(sundayTime).format('YYYY-MM-DD');
       },
       changeTab(){

       },
       getClear(){

       },
       handleQuery(){},
       resetQuery(){

       },
       handleStudent(){

       },
       resetStudent(){

       },
      chartDomFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '兴趣区角停留时长统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          dataZoom:{
           bottom:0,
           show:12/this.chartList.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.chartList.length*100
         },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
           
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data: this.chartList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'50',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.chartList,
              },
          ]
          }
          this.chartDom.on('click',(e)=>{ 
            this.open=true;
            this.$nextTick(() => {
              this.studentDom = this.$echarts.init(this.$refs.studentDom);
              this.studentDomFn();
            })
             })
            // 使用刚指定的配置项和数据显示图表
            this.chartDom.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
      studentDomFn(){
          const option = {
             // backgroud:'#333',
            title: {
              text: '',
             //  subtext: '纯属虚构',
              left: 'left'
            },
            tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                 type: 'shadow'
                 }
             },
             dataZoom:{
              bottom:0,
              show:12/this.studentChartList.length<1,
              // show:true,
              type:'slider',
              zoomLock:true,
              brushSelect:false,
              height:8,
              // backgroundColor:'#000000',
              handleSize:'0',
              // moveHandleSize:1,
              // moveHandleStyle:{
              //   borderType:'dotted'
              // },
              sow:true,
              xAxisIndex:[0],
              start:0,
              end:12/this.studentChartList.length*100
            },
             legend: {
               selectedMode: 'single',
               top:0,
                 left:'right',
              
             },
             grid: {
                 left: '3%',
                 right: '4%',
                 bottom: '3%',
                 containLabel: true
             },
             xAxis: [
                 {
                 type: 'category',
                 axisLabel: {//x轴文字的配置
                  show: true,
                  rotate:0,
                  interval: 0,//使x轴文字显示全
                 },
                 data: this.studentChartList.map(item=>item.name)
                 }
             ],
             yAxis: [
                 {
                 type: 'value'
                 }
             ],
             color:['#2f89cf','#27d08a'],
             series: [
                 {
                     name: '',
                     type: 'bar',
                     // stack: 'Ad',
                     barWidth:'50',
                     emphasis: {
                         focus: 'series'
                     },
                     label: {
                       show: true,
                       position: 'inside',
                       fontSize: 15
                     },
                     data: this.studentChartList,
                 },
             ]
             }
           // 使用刚指定的配置项和数据显示图表
           this.studentDom.setOption(option,true);
           window.addEventListener("resize", this.monitorResize);
      },
        //地图监听窗口缩放事件
     monitorResize(){
        this.chartDom.resize();
        this.studentDom.resize();
      
      },
    }
  };
</script>
<style lang="scss" scoped>
.app-container{
  .charts{
    padding-top: 15px;
  .chartDom{
    width:90%;
    height:480px;
   }
}

}
.studentdata{ 
    padding-top: 20px;
    width:100%;
    height: 500px;
  .studentDom{
    width:100%;
    height:400px;
  }
}
::v-deep .el-picker-panel {
  position: absolute;
}

</style>